<template>
  <div class="card">
    <div class="card-header pb-0">
      <div class="row">
        <div class="col-lg-6 col-7">
          <h6>全部订单信息</h6>
          <p class="text-sm mb-0">
            <i class="fa fa-check text-info" aria-hidden="true"></i>
            <span class="font-weight-bold ms-1">本月已完成 30单</span>
          </p>
        </div>
        <div class="col-lg-6 col-7">
          <el-button
            :type="plain"
            @click="openBid"
            v-if="!this.$store.state.showBid"
            style="float: right"
          >
            <h7 style="font-weight: 700"> 去投标！</h7>
            <i class="fa fa-arrow-left text-success" aria-hidden="true"></i>
          </el-button>
          <el-button
            :type="plain"
            @click="hideBid"
            v-if="this.$store.state.showBid"
            style="float: right"
          >
            <h7 style="font-weight: 700">收起</h7>
            <i class="fa fa-arrow-right text-info" aria-hidden="true"></i>
          </el-button>
        </div>
      </div>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                订单名称及编号
              </th>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
              >
                下单公司及对接人
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                订单状态
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                操作
              </th>
              <th class="text-secondary opacity-7"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in form" :key="index">
              <td>
                <div class="d-flex px-2 py-1">
                  <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">{{ item.name }}</h6>
                    <p class="text-xs text-secondary mb-0">
                      {{ item.number }}
                    </p>
                  </div>
                </div>
              </td>
              <td>
                <div>
                  <div class="d-flex px-2 py-1">
                    <div>
                      <vsud-avatar
                        :img="img2"
                        class="me-3"
                        size="sm"
                        border-radius="lg"
                        alt="user2"
                      />
                    </div>
                    <div class="d-flex flex-column justify-content-center">
                      <h6 class="mb-0 text-sm">{{ item.person }}s</h6>
                      <p class="text-xs text-secondary mb-0">
                        {{ item.email }}
                      </p>
                    </div>
                  </div>
                </div>
              </td>
              <td class="align-middle text-center text-sm">
                <vsud-badge
                  color="info"
                  variant="gradient"
                  size="sm"
                  v-if="item.status === '已中标'"
                  >已中标</vsud-badge
                >
                <vsud-badge
                  color="success"
                  variant="gradient"
                  size="sm"
                  v-if="item.status === '正在进行'"
                  >进行中</vsud-badge
                >
                <vsud-badge
                  color="primary"
                  variant="gradient"
                  size="sm"
                  v-if="item.status === '已完工'"
                  >已完工</vsud-badge
                >
                <vsud-badge
                  color="warning"
                  variant="gradient"
                  size="sm"
                  v-if="item.status === '已发货'"
                  >已发货</vsud-badge
                >
                <vsud-badge
                  color="secondary"
                  variant="gradient"
                  size="sm"
                  v-if="item.status === '已完成'"
                  >已完成</vsud-badge
                >
              </td>
              <td class="align-middle text-center">
                <el-button
                  text
                  @click="
                    item.status = '正在进行';
                    paichanVisible = true;
                  "
                  class="btn btn-link text-dark px-3 mb-0 align-items-center operate"
                  data-toggle="tooltip"
                  data-original-title="Edit user"
                  v-if="item.status === '已中标'"
                  ><el-icon><FolderAdd /></el-icon>排产</el-button
                >
                <el-button
                  text
                  @click="item.status = '已完工'"
                  href="javascript:;"
                  class="btn btn-link text-dark px-3 mb-0 align-items-center operate"
                  data-toggle="tooltip"
                  data-original-title="Edit user"
                  v-if="item.status === '正在进行'"
                  ><el-icon><Timer /></el-icon>完工</el-button
                >
                <el-button
                  text
                  @click="item.status = '已发货'"
                  href="javascript:;"
                  class="btn btn-link text-dark px-3 mb-0 align-items-center operate"
                  data-toggle="tooltip"
                  data-original-title="Edit user"
                  v-if="item.status === '已完工'"
                  ><el-icon><Van /></el-icon>发货</el-button
                >
                <el-button
                  text
                  @click="item.status = '已完成'"
                  class="btn btn-link text-dark px-3 mb-0 align-items-center operate"
                  data-toggle="tooltip"
                  data-original-title="Edit user"
                  v-if="item.status === '已发货'"
                  ><el-icon><Finished /></el-icon>完成</el-button
                >
              </td>
            </tr>
          </tbody>
        </table>
         <el-pagination layout="prev, pager, next" :total="50" />
      </div>
     
    </div>
  </div>

  <!-- 排产弹窗 -->
  <el-dialog title="排产" v-model="paichanVisible" width="65%">
    <el-row>
      <el-button
        type="success"
        @click="newArrange()"
        style="margin-bottom: 15px"
        >+添加生产设备</el-button
      >
    </el-row>
    <el-row>
      <el-col v-for="a in arranges" :key="a.equip" style="margin-bottom: 15px">
        <span>设备名称</span>
        <el-select
          v-model="a.equip"
          style="padding-left: 10px; padding-right: 10px; width: 120px"
        >
          <el-option
            v-for="e in equips"
            :key="e.name"
            :label="e.name"
            :value="e.name"
          >
          </el-option>
        </el-select>
        <span>开始时间</span>
        <el-date-picker
          v-model="a.startDate"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
        <span>结束时间</span>
        <el-date-picker
          v-model="a.endDate"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
        <el-button type="danger" @click="deleteArrange(a.id)">删除</el-button>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="paichanVisible = false">取 消</el-button>
        <el-button type="primary" @click="paichanVisible = false"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import VsudAvatar from "@/components/VsudAvatar.vue";
import VsudBadge from "@/components/VsudBadge.vue";
import { mapMutations } from "vuex";
import img2 from "@/assets/img/team-3.jpg";
import { Van, Timer, FolderAdd, Finished } from "@element-plus/icons";

export default {
  name: "order-card",
  data() {
    return {
      paichanVisible: false,
      img2,
      form: [
        {
          number: "#fs4335345",
          name: "10个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "已中标",
        },
        {
          number: "#fs4346455",
          name: "100个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "已中标",
        },
        {
          number: "#fs467856",
          name: "1000个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "正在进行",
        },
        {
          number: "#fs4308530",
          name: "10000个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "正在进行",
        },
        {
          number: "#fs480097",
          name: "100000个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "已完工",
        },
        {
          number: "#fs48693877",
          name: "10000000个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "已发货",
        },
        {
          number: "#fs4829343",
          name: "100000000个热带冰红茶",
          person: "NEU roll king",
          email: "rollking@neu.edu.cn",
          status: "已完成",
        },
      ],
      arranges: [
        {
          id: "1",
          equip: "高级车床",
          startDate: "2022-05-10",
          endDate: "2022-05-11",
        },
        {
          id: "2",
          equip: "中级车床",
          startDate: "2022-05-10",
          endDate: "2022-05-11",
        },
        {
          id: "3",
          equip: "低级车床",
          startDate: "2022-05-10",
          endDate: "2022-05-11",
        },
      ],
      equips: [
        {
          id: 1,
          name: "高级车床",
        },
        {
          id: 2,
          name: "中级车床",
        },
        {
          id: 3,
          name: "低级车床",
        },
      ],
    };
  },
  components: {
    VsudAvatar,
    VsudBadge,
    Van,
    Timer,
    FolderAdd,
    Finished,
  },
  methods: {
    ...mapMutations(["openBid", "hideBid"]),
    choose() {
      this.showBid = !this.showBid;
      this.$emit("openbid");
    },
    newArrange() {
      //添加排产行
      this.arranges.push({
        id: "",
        equip: "",
        startDate: "",
        endDate: "",
      });
    },
     deleteArrange(num) {
      let deleteIndex = this.arranges.findIndex((item) => item.id === num)
      this.arranges.splice(deleteIndex, 1)
    },
  },
};
</script>
<style scoped>
.operate {
  font-size: 14px;
}
.el-icon {
  margin: 6px;
  font-size: 16px;
}
a {
  text-decoration: underline;
}
.el-col {
  display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    /* flex: 1; */
    justify-content: space-around;
    align-items: center;
}
</style>
